<script setup lang="ts">
let direction = ref('rtl')
let writingMode = ref('horizontal-tb')
let flexDirection = ref('row')
let flexWrap = ref('nowrap')
let alignContent = ref('flex-start')
let alignItems = ref('flex-start')
let justifyContent = ref('flex-start')
let flexGap = ref(10)
let inlineSize = ref(40)
let blockSize = ref(40)

let gapPx = computed(() => {
  return flexGap.value + 'px'
})
let inlineSizePx = computed(() => {
  return inlineSize.value + 'px'
})
let blockSizePx = computed(() => {
  return blockSize.value + 'px'
})

let flexContainerItems = ref(0)
let flexContainerRef = ref<HTMLEmbedElement | null>()

function addItem() {
  flexContainerItems.value ++
}

function reduceItem() {
  if(flexContainerItems.value <= 0) return
  flexContainerItems.value --
}


</script>

<template>
  <div class="wrap">
    <div class="container">
      <div class="flex__container" ref="flexContainerRef" id="flexContainer">
        <div v-for="item in flexContainerItems" :key="item" class="flex__item"></div>
      </div>
      <div class="actions">
        <div @click="addItem" class="toggle" id="add">
          <input type="checkbox">
          <span class="button"></span>
          <span class="label">+</span>
        </div>
        <div @click="reduceItem" class="toggle" id="reduce">
          <input type="checkbox">
          <span class="button"></span>
          <span class="label">-</span>
        </div>
      </div>
    </div>
    <!--  表单控制-->
    <div class="forms">
      <div class="controls">
        <label for="direction">direction:</label>
        <select v-model="direction" id="direction">
          <option value="ltr">ltr</option>
          <option value="rtl">rtl</option>
        </select>
      </div>

      <div class="controls">
        <label for="writingmode">writingmode:</label>
        <select v-model="writingMode" id="writingmode">
          <option value="horizontal-tb">horizontal-tb</option>
          <option value="vertical-lr">vertical-lr</option>
          <option value="vertical-rl">vertical-rl</option>
          <option value="sideways-rl">sideways-rl</option>
          <option value="sideways-lr">sideways-lr</option>
        </select>
      </div>

      <div class="controls">
        <label for="flexDirection">flex-direction:</label>
        <select v-model="flexDirection" id="flexDirection">
          <option value="row">row</option>
          <option value="row-reverse">row-reverse</option>
          <option value="column">column</option>
          <option value="column-reverse">column-reverse</option>
        </select>
      </div>
      <div class="controls">
        <label for="flexWrap">flex-wrap:</label>
        <select v-model="flexWrap" id="flexWrap">
          <option value="nowrap">nowrap</option>
          <option value="wrap">wrap</option>
          <option value="wrap-reverse">wrap-reverse</option>
        </select>
      </div>
      <div class="controls">
        <label for="alignContent">align-content:</label>
        <select v-model="alignContent" id="alignContent">
          <option value="flex-start">flex-start</option>
          <option value="flex-end">flex-end</option>
          <option value="center">center</option>
          <option value="space-between">space-between</option>
          <option value="space-around">space-around</option>
          <option value="space-evenly">space-evenly</option>
          <option value="stretch">stretch</option>
          <option value="start">start</option>
          <option value="end">end</option>
          <option value="baseline">baseline</option>
          <option value="first baseline">first baseline</option>
          <option value="last baseline">last baseline</option>
        </select>
      </div>
      <div class="controls">
        <label for="alignItems">align-items:</label>
        <select v-model="alignItems" id="alignItems">
          <option value="flex-start">flex-start</option>
          <option value="flex-end">flex-end</option>
          <option value="center">center</option>
          <option value="space-between">space-between</option>
          <option value="space-around">space-around</option>
          <option value="space-evenly">space-evenly</option>
          <option value="stretch">stretch</option>
          <option value="start">start</option>
          <option value="end">end</option>
          <option value="baseline">baseline</option>
          <option value="first baseline">first baseline</option>
          <option value="last baseline">last baseline</option>
        </select>
      </div>
      <div class="controls">
        <label for="justifyContent">justify-content:</label>
        <select v-model="justifyContent" id="justifyContent">
          <option value="flex-start">flex-start</option>
          <option value="flex-end">flex-end</option>
          <option value="center">center</option>
          <option value="space-between">space-between</option>
          <option value="space-around">space-around</option>
          <option value="space-evenly">space-evenly</option>
          <option value="start">start</option>
          <option value="end">end</option>
          <option value="left">left</option>
          <option value="right">right</option>
        </select>
      </div>

      <div class="controls">
        <label for="gap">gap:</label>
        <input v-model="flexGap" type="range" id="gap" name="gap" min="10" max="100" steps="1"  />
      </div>

      <div class="controls">
        <label for="inlineSize">inline-size:</label>
        <input v-model="inlineSize" type="range" id="inlineSize" name="inlineSize" min="40" max="100" steps="1" />
      </div>

      <div class="controls">
        <label for="blockSize">block-size:</label>
        <input v-model="blockSize" type="range" id="blockSize" name="blockSize" min="40" max="80" steps="1" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .wrap {
    --writingMode: v-bind(writingMode);
    --direction: v-bind(direction);
    --flexDirection: v-bind(flexDirection);
    --flexWrap: v-bind(flexWrap);
    --alignContent: v-bind(alignContent);
    --alignItems: v-bind(alignItems);
    --justifyContent: v-bind(justifyContent);
    --gap: v-bind(gapPx);
    --flexItemBlockSize: v-bind(blockSizePx);
    --flexItemInlineSize: v-bind(inlineSizePx);


    width: 100vw;
    min-height: 100vh;
    margin: 0;
    background-color: #291642;
    font-family: "Exo", Arial, sans-serif;
    font-size: 100%;
    letter-spacing: 0.1rem;
    color: #fff;
    display: grid;
    grid-template-columns: 1fr minmax(200px, max-content);
    gap: 20px;
    .container {
      writing-mode: var(--writingMode);
      direction: var(--direction);

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .flex__container {
        display: flex;
        flex-flow: var(--flexDirection) var(--flexWrap);
        place-content: var(--alignContent) var(--justifyContent);
        align-items: var(--alignItems);
        gap: var(--gap);

        inline-size: calc(var(--flexItemInlineSize) * 4 + var(--gap) * 3 + 2px);
        block-size: calc(var(--flexItemBlockSize) * 2 + var(--gap) + 2px);
        border: 1px dashed #e91e63;
        border-color: #ffeb3b #ff5722 #fff #00bcd4;
        position: relative;
        // 创建一个计数器
        counter-reset: listCounter;

        .flex__item {
          display: flex;
          justify-content: center;
          align-items: center;
          min-inline-size: var(--flexItemInlineSize);
          min-block-size: var(--flexItemBlockSize);
          // 增加或者减少计数器的值
          counter-increment: listCounter;
          background-image: url("https://www.w3cplus.com/sites/default/files/blogs/2020/2006/frog-green.svg"),
          linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
          background-repeat: no-repeat, repeat;
          background-position: center, left top;
          background-size: var(--flexItemBlockSize) var(--flexItemInlineSize);
          position: relative;
          background-blend-mode: exclusion;

          &::before {
            // 展示计数器的值
            content: counter(listCounter);
            font-size: 2rem;
            background: linear-gradient(to bottom, #03a9f4, #ff5722);
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
          }
        }
      }

      .toggle {
        margin: 4px;
        display: inline-block;
        box-shadow: inset 0 0 35px 5px rgba(0, 0, 0, 0.25),
        inset 0 2px 1px 1px rgba(255, 255, 255, 0.9),
        inset 0 -2px 1px 0 rgba(0, 0, 0, 0.25);
        border-radius: 8px;
        background: #ccd0d4;
        position: relative;
        height: 140px;
        width: 140px;
        transform: scale(0.5);
        &:before {
          box-shadow: 0 0 17.5px 8.75px #fff;
          border-radius: 118.3px;
          background: #fff;
          position: absolute;
          margin-left: -50.4px;
          margin-top: -50.4px;
          opacity: 0.2;
          content: "";
          height: 100.8px;
          width: 100.8px;
          left: 50%;
          top: 50%;
        }
        .button {
          -webkit-filter: blur(1px);
          -moz-filter: blur(1px);
          filter: blur(1px);
          transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
          box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5),
          inset 0 -3px 4px -1px rgba(0, 0, 0, 0.2),
          0 -10px 15px -1px rgba(255, 255, 255, 0.6),
          inset 0 3px 4px -1px rgba(255, 255, 255, 0.2),
          inset 0 0 5px 1px rgba(255, 255, 255, 0.8),
          inset 0 20px 30px 0 rgba(255, 255, 255, 0.2);
          border-radius: 96.32px;
          position: absolute;
          background: #ccd0d4;
          margin-left: -48.16px;
          margin-top: -48.16px;
          display: block;
          height: 96.32px;
          width: 96.32px;
          left: 50%;
          top: 50%;
        }

        .label {
          transition: color 300ms ease-out;
          text-shadow: 1px 1px 3px #ccd0d4, 0 0 0 rgba(0, 0, 0, 0.8), 1px 1px 4px #fff;
          line-height: 139px;
          text-align: center;
          position: absolute;
          font-weight: 700;
          font-size: 42px;
          display: block;
          opacity: 0.9;
          height: 100%;
          width: 100%;
          color: rgba(0, 0, 0, 0.4);
        }

        input {
          opacity: 0;
          position: absolute;
          cursor: pointer;
          z-index: 1;
          height: 100%;
          width: 100%;
          left: 0;
          top: 0;

          &:active {
            & ~ .button {
              box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.4),
              inset 0 -8px 30px 1px rgba(255, 255, 255, 0.9),
              0 -10px 15px -1px rgba(255, 255, 255, 0.6),
              inset 0 8px 25px 0 rgba(0, 0, 0, 0.4),
              inset 0 0 10px 1px rgba(255, 255, 255, 0.6);
            }
            & ~ .label {
              font-size: 40px;
              color: rgba(0, 0, 0, 0.45);
            }
          }

          &:checked {
            & ~ .button {
              box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.4),
              inset 0 -8px 25px -1px rgba(255, 255, 255, 0.9),
              0 -10px 15px -1px rgba(255, 255, 255, 0.6),
              inset 0 8px 20px 0 rgba(0, 0, 0, 0.2),
              inset 0 0 5px 1px rgba(255, 255, 255, 0.6);
            }
            & ~ .label {
              font-size: 40px;
              color: rgba(0, 0, 0, 0.4);
            }
          }
        }
      }
    }

    .forms {
      height: 100vh;
      overflow-y: auto;
      border-left: 4px solid rgba(255, 255, 0, 0.1);
      display: flex;
      flex-direction: column;
      padding: 10px;
      position: relative;
      z-index: 2;
      background-color: rgba(0, 0, 0, 0.2);
      .controls {
        background-color: rgba(0, 0, 0, 0.1);
        padding: 5px;
        border-radius: 0.5em;
        border: 1px solid rgba(0, 0, 0, 0.2);
        margin: 5px;

        select {
          font-size: 0.9em;
          max-width: 100px;
          min-width: 100px;
        }
      }
    }

  }

</style>
